<template>
  <div class="main">
    <div class="part">
      <div class="p-title">
        <div class="title">接口对接</div>
      </div>
      <div class="p-cont p-cont-flex">
        <el-card shadow="always" v-for="(item, index) in iData" :key="index">
          <div class="wrapper">
            <div class="wrap-title">
              <div class="title">
                <div>{{ item.title }}</div>
                <div class="t-status">
                  <div class="t-loading" v-if="item.status === 3">
                    <IconifyIconOnline
                      icon="eos-icons:loading"
                      width="16px"
                      height="16px"
                    />
                  </div>
                  <div
                    class="dot"
                    v-else
                    :class="['dot', statusClassV[item.status]]"
                  />
                  <div class="t-txt">
                    {{ statusKV[item.status] }}
                  </div>
                </div>
              </div>
              <div class="sub-title">
                {{ item.subTitle }}
              </div>
            </div>

            <div class="des">
              {{ item.des }}
            </div>
            <div class="time">
              <div>最后检测时间：{{ item.time }}</div>
              <el-button link type="primary" @click="checkStatus(item)"
                >手动检测</el-button
              >
            </div>
            <div class="wrap-status" />
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, ref } from "vue";
import { formatDate } from "@/utils/tools";

const statusKV = ref({
  0: "未处理",
  1: "异常",
  2: "正常",
  3: "检测中..."
});
const statusClassV = ref({
  0: "gray",
  1: "error",
  2: "normal"
});
const iData = ref([
  {
    title: "中心药房ERP系统",
    subTitle: "中国医药贵州xx市老年福利中心ERP系统",
    des: "实现主要功能：订单数据同步，订单状态同步，药品库存查询",
    time: formatDate(new Date(), "yyyy-MM-dd hh:mm:ss"),
    status: 2
  },
  {
    title: "医保系统",
    subTitle: "暂无信息",
    des: "实现主要功能：医保个人账户绑定（用户端），医保个账结算（用户端）",
    time: formatDate(new Date(), "yyyy-MM-dd hh:mm:ss"),
    status: 2
  },
  {
    title: "物流系统",
    subTitle: "暂无信息",
    des: "实现主要功能：快递单据同步，包裹状态同步",
    time: formatDate(new Date(), "yyyy-MM-dd hh:mm:ss"),
    status: 2
  }
]);

function checkStatus(item) {
  item.status = 3;
  setTimeout(() => {
    item.status = 2;
    item.time = formatDate(new Date(), "yyyy-MM-dd hh:mm:ss");
  }, 3000);
}
onBeforeMount(() => {});
onMounted(() => {});
</script>
<style scoped lang="scss">
.part {
  min-height: calc(100vh - 120px);

  .p-cont-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-card {
      width: 32%;
      height: 220px;

      ::v-deep(.el-card__body) {
        width: 100%;
        height: inherit;
      }

      .wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0px 0px 20px 0px;

        .wrap-title {
          .title {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }

        .sub-title {
          font-size: 14px;
          color: #bbb;
        }

        .des {
          margin-top: 20px;
          font-size: 14px;
          color: #bbb;
        }

        .time {
          margin-top: 20px;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
        }

        .t-status {
          display: flex;
          align-items: center;

          .dot {
            width: 16px;
            height: 16px;

            border-radius: 20px;

            &.normal {
              background-color: #409eff;
            }

            &.gray {
              background-color: #909399;
            }

            &.error {
              background-color: #f56c6c;
            }
          }

          .t-txt {
            white-space: nowrap;
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>
